import React from 'react'
import { withRouter } from 'react-router-dom'
import './home_1.less'
import swiper from 'swiper'
import 'swiper/css/swiper.css'
class Home1 extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: 'home1',
            arr: [
                {
                    title: 'vip1'
                },
                {
                    title: 'vip2'
                },
                {
                    title: 'vip3'
                },

            ],
            imgList: [
                require("../../img/vip.png").default,
                require("../../img/vip2.png").default,
                require("../../img/vip3.png").default
            ]
        }
    }
    render() {
        console.log(withRouter)
        return (
            <div className="Vip_box">
                <div className="Vip_head">
                    <div onClick={() => { this.goBack() }} className="iconfont icon-fanhui1 goback" style={{ transform: 'rotateY(180deg)' }}></div>
                    <div className="Vip_title" style={{ fontSize: `${.58}rem`, fontWeight: `900` }}>会员福利</div>
                    <div></div>
                </div>


                <div className="Vip_main">
                    <div className="Vip_banner">
                        {/* <div className="zw"></div> */}
                        <div className="swiper-container" id="Vip_swiper"
                            ref={(bannerbox) => { this.banner = bannerbox }}
                            style={{ borderRadius: '.3rem', background: 'white' }}
                        >

                            <div className="swiper-wrapper">
                                {
                                    this.state.imgList.map((item, index) => {
                                        return <div key={index} className="swiper-slide" style={{ width: '100%', minHeight: '50px' }}>
                                            {index === 1 ?
                                                <div style={{ margin: '.20rem auto', background: 'rgb(23,19,38)' }}><p>充值或消费5000可享优惠</p></div>
                                                : (index === 2 ?
                                                    <div style={{ margin: '.25rem auto', background: 'rgb(168,111,76)' }}><p>充值或消费15000可享</p></div>
                                                    : <div style={{ margin: '.25rem auto', background: 'rgb(213,207,179)' }}><p>充值或消费1000可享</p></div>)}
                                            <img src={item} className="Img" />
                                            {/* {<div className="Vip_lv">
                                            <i className="iconfont icon-suo1" style={{fontSize:'.2rem'}}>未达成</i>
                                        </div>} */}
                                            <div></div>
                                        </div>
                                    })
                                }

                            </div>
                            <div className="swiper-pagination"
                                ref={(pagination) => { this.pagination = pagination }}
                                style={{ position: 'absolute', bottom: 105 + '%', zIndex: 99 }}>

                            </div>


                        </div>
                    </div>
                    <div className="Vip_info">
                        在lamington门店消费或充值Vip服务，均可提升Vip等级，
                        赚取相应积分，积分可折现
                        等级越高优惠越高，礼物越丰富
                    </div>
                    {/* 尊享权益 */}
                    <div className="Vip_rights">
                        <div className="Vip_rights_1">
                            尊享权益
                        <i className="iconfont icon-iconcopy1"></i>
                        </div>
                        <div className="Vip_rights_main">
                            {/* vip2 */}
                            <div style={{ background: 'rgb(147, 140, 172)' }}>
                                <div>
                                    <img src={require("../../img/vip2.png").default} />
                                </div>
                                <div style={{ background: 'rgba(34,30,48,.8)', color: 'rgb(255,255,255)', textAlign: 'center' }}>
                                    <p>尊贵的铂金用户</p>
                                    当前享有93折优惠
                                </div>
                            </div>
                            {/* vip3    */}
                            <div style={{ background: 'rgb(231, 210, 182)' }}>
                                <div>
                                    <img src={require("../../img/vip3.png").default} />
                                </div>
                                <div style={{ color: 'rgb(255,255,255)', textAlign: 'center' }}>
                                    <p>尊贵的钻石用户</p>
                                当前享有89折优惠
                                </div>
                            </div>
                            {/* vip1 */}
                            <div>
                                <div style={{ background: ' rgb(247, 242, 221)' }}>
                                    <img src={require("../../img/vip.png").default} />
                                </div>
                                <div style={{ color: 'rgb(255,255,255)', textAlign: 'center' }}>
                                    <p>尊贵的黄金用户</p>
                                当前享有97折优惠
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* 快捷升级 */}
                    <div className="Vip_level">
                        <div className="Vip_level_1">
                            快捷升级
                            <i className="iconfont icon-iconcopy1"></i>
                        </div>
                        <div className="Vip_level_content">
                            <div>
                                充值Vip服务立即升级，并获取相应积分兑换相应好礼
                            </div>
                            <div style={{ marginTop: 15 + 'px' }} onClick={() => { this.goVipPage() }}>立即充值</div>
                        </div>
                    </div>
                    <div className="Vip_integral">
                        <div className="Vip_integral_1">积分规则</div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;如您已注册成为lamington会员，您在lamington中国指定渠道和场景发生的有
                            效购买行为，即可获得会员积分(“积分")，通常可累积积分的有效购买
                            行为包括（以相关平台、餐厅和门店的实际开通和支持情况为准)<hr />
                            &nbsp;&nbsp;&nbsp;&nbsp;在lamington官方APP、lamington官方小程序和lamington咖啡小程序购买可
                            累积积分的产品;<hr />
                            &nbsp;&nbsp;&nbsp;&nbsp;在注册成为lamington会员并与本人手机号绑定后，在lamington门店柜台或自助点餐机购买可累积
                            积分的餐品或产品且使用扫码支付（前提是本人通过lamington支持的扫码支付渠道注册相关扫码
                            支付功能时使用的手机号，需与注册成为lamington会员时使用的手机号一致）<hr />
                            最终解释权归lamington所有
                            </div>
                    </div>
                </div>
                <div className="zw"></div>
            </div>
        )
    }
    componentDidMount() {
        new swiper(this.banner, {
            loop: true,
            slidesPerView: 1.2,
            centeredSlides: true,
            centeredSlidesBounds: true,
            preventClicksPropagation: true,
            pagination: {
                el: this.pagination,
                clickable: true,
            },
            spaceBetween: 10
            // centeredSlidesBounds: true
        })
    }
    goBack = () => {
        this.props.history.go(-1)
    }
    goVipPage = () => {
        console.log(this.props.history.push('/myVip'))
    }
}
export default withRouter(Home1) 